<template>
  <div>
    <div>
      <div class="crumbs">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>
            <i class="el-icon-takeaway-box"></i> 模型部署
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>

    <div class="container">
      <el-table
          :data="tableData" border class="table" ref="multipleTable"
          header-cell-class-name="table-header"
      >
        <el-table-column prop="deploymentName" label="部署名"></el-table-column>
        <el-table-column prop="createdTime" label="开始时间"></el-table-column>
        <el-table-column label="部署状态">
          <template #default="scope">
            <div v-if="scope.row.deploymentState === 'SUCCESS'">
              部署成功
            </div>
            <div v-else-if="scope.row.deploymentState === 'WAITING'">
              未部署
            </div>
            <div v-else-if="scope.row.deploymentState === 'ON_GOING'">
              部署中
            </div>
            <div v-else>
              部署失败
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="finishTime" label="完成时间"></el-table-column>
        <el-table-column label="部署链接" :show-overflow-tooltip="true" >
          <template #default="scope">
            <div @click="copyLink(scope.row.deploymentUrl)" style="text-decoration: underline;cursor: pointer;color: deepskyblue">
              {{scope.row.deploymentUrl}}
            </div>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="180" align="center">
          <template #default="scope">
            <el-button type="text" class="red" @click="handleDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>

      </el-table>
      <div class="pagination">
        <el-pagination background layout="total, prev, pager, next" :current-page="query.pageIndex"
                       :page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
      </div>

    </div>
  </div>
</template>

<script>
import {reactive, ref} from "vue";
import {getAllDeployment} from "../../api/model";
import clipboard3 from "vue-clipboard3";
import { ElMessage } from "element-plus";

export default {
  name: "Deployment",
  setup(){
    const query = reactive({
      file: "",
      name: "",
      pageIndex: 1,
      pageSize: 10,
    });
    const tableData = ref([]);
    const pageTotal = ref(0);
    const { toClipboard } = clipboard3();

    const getPage = () =>{
      const payload = {
        userId: localStorage.getItem("ms_userId")
      }
      getAllDeployment(payload).then(res =>{
        tableData.value = res.result
      })
    }
    getPage()

    const copyLink = async (a) =>{
      try {
        await toClipboard(a);
        ElMessage.success('复制成功!!')
      } catch (error) {
        ElMessage.error("复制失败!!")
      }
    }

    return{
      query,
      tableData,
      pageTotal,
      getPage,
      copyLink
    }
  }
}
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.green {
  color: rgb(32, 220, 88)
}
.yellow{
  color:yellowgreen;
}
.mr10 {
  margin-right: 10px;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>